<template>
	<view class="ss-flex-col ss-gap-24 ss-p-x-32">
		<view v-for="(item,index) in list" :key="index" class="bg-color-white ss-radius-16 item-box ss-flex-col ss-gap-24">
			<view class="ss-flex ss-row-between ss-gap-32">
				<view class="ss-flex ss-gap-16 ss-flex-1">
					<z-avatar :src="item.member_avatar_url" size="64rpx" />
					<view class="font-color-subtext ss-line-1 ss-font-35 bold">{{ item.nick_name }}</view>
				</view>
			</view>
			<uv-line></uv-line>
			<view class="ss-flex ss-row-between">
				<view class="ss-flex ss-gap-8">
					<view class="font-color-subtext ss-font-28">人数</view>
					<z-tags fontSize="28" :plain="false" width="96" height="56" nocheckedBg="#E7F5E4" color="#16220F">{{ item.number }}人</z-tags>
				</view>
				<view class="ss-flex ss-gap-8">
					<view class="font-color-subtext ss-font-28">服务费</view>
					<z-tags fontSize="28" :plain="false" width="96" height="56" nocheckedBg="#E7F5E4" color="#16220F">{{ item.service_fee }}元</z-tags>
				</view>
				<view class="ss-flex ss-gap-8">
					<view class="font-color-subtext ss-font-28">时间段</view>
					<z-tags fontSize="28" :plain="false" width="194" height="56" nocheckedBg="#E7F5E4" color="#16220F">{{ item.begin_time }}-{{ item.end_time }}</z-tags>
				</view>
			</view>
			<view class="ss-flex ss-gap-24">
				<view class="ss-flex ss-gap-26 ss-flex-1">
					<view class="ss-font-24 font-color-dark9">备注</view>
					<view class="input-box ss-flex ss-row-center ss-col-center ss-flex-1">
						<input :value="item.remarks" @input="e => submitRemarks(e,item,index)" type="text" placeholder="请输入备注内容" class="ss-font-24 ss-w-100" placeholder-class="font-color-ccc ss-font-24" />
					</view>
				</view>
				<z-button @tap="state.show = true,state.itemInfo = item" width="144" height="56" radius="8">积分管理</z-button>
			</view>
			<view class="font-color-dark6 ss-font-24 ss-text-right">打卡时间：{{ item.create_time }}</view>
		</view>
	</view>
	<z-modal align="center" v-model="state.show" title="添加积分" showCancelButton @confirm="confirmSubmit">
		<template v-slot:content>
			<view class="ss-flex ss-gap-16">
				<view class="ss-font-24 font-color-dark6">积分数量</view>
				<input v-model="state.number" class="inputClass ss-font-24 ss-flex-1" type="number" placeholder="请输入积分数量" placeholder-class="font-color-ccc ss-font-24" />
			</view>
		</template>
	</z-modal>
</template>

<script setup>
	import sheep from "@/sheep"
	defineProps({
		list:{
			type:Array,
			default: () => {
				return []
			}
		}
	})
	const state = reactive({
		show:false,
		timer:null,
		number:'',
		itemInfo:{}
	})
	const emit = defineEmits(['refresh'])
	function submitRemarks(e,item,index){
		let content = e.detail.value
		clearTimeout(state.timer)
		state.timer = setTimeout(() => {
			sheep.$api.merchant.clockInRemarks({clock_in_id:item.clock_in_id,remarks:content}).then( res => {
				
			})
		},2000)
	}
	async function confirmSubmit(){
		if(!state.number) return sheep.$helper.toast('请输入积分数量')
		let form = {
			member_id:state.itemInfo?.member_id,
			num:state.number,
			is_add:1,
			msg:'添加积分'
		}
		const { data,code } = await sheep.$api.merchant.exchangePoint(form)
		if( code != 200) return
		state.show = false
		setTimeout(() => {
			emit('refresh')
		},1000)
	}
</script>

<style lang="scss" scoped>
	.item-box {
		padding: 40rpx 24rpx 24rpx;
		.input-box {
			height: 56rpx;
			background: #FFFFFF;
			border-radius: 8rpx;
			border: 2rpx solid #E6E6E6;
			padding: 12rpx 16rpx;
			box-sizing: border-box;
		}
	}
	.inputClass {
		background: #FFFFFF;
		border-radius: 8rpx;
		border: 2rpx solid #E6E6E6;
		padding: 12rpx 16rpx;
	}
</style>